<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //自己加的行内样式 display
            //隐藏display：none 显示display：原始值 如果没有原始值，则删除display样式
            //带时间的动画路线  左上角<->右下角
            $(".show").click(function(){
                //$("div").show()
                // $("div").show("slow")  normal fast
                $("div").show(1000)
            })
            $(".hide").click(function(){
                $("div").hide()
            })
            $(".toggle").click(function(){
                $("div").toggle()
            })
            

            //改的行内样式 height
            //动画路线 上<->下
            $(".slideDown").click(function(){
                $("div").slideDown(3000)
            })
            $(".slideUp").click(function(){
                $("div").slideUp()
            })
            $(".slideToggle").click(function(){
                //$("div").stop().slideToggle()删除所有排队的动画，在最后一次动画基础上继续新动画//stop()终止动画
                $("div").finish().slideToggle()
                //finish() 删除所有排队的动画，完成所有动画，开始新动画
            })
            

            //行内样式改的是 opacity 0<->1
            $(".fadeIn").click(function(){
                $("div").fadeIn()
            })
            $(".fadeOut").click(function(){
                $("div").fadeOut(3000)
            })
            $(".fadeToggle").click(function(){
                $("div").fadeToggle()
            })
            $(".fadeTo").click(function(){
                $("div").fadeTo("normal",0.3)//前面要加时间
            })




            $(".animate").click(function(){
                // $("div").animate({width:"400px"},1000)
                //$("div").animate({width:"400px",height:"400px",opacity:0.3},3000)
                $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},3000)
            })
        })
    </script>
</head>
<body>
    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    <br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <br>
    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo</button>
    <br>
    <button class="animate">animate</button>
    <div></div>
</body>
</html>